<style include="profile-picker-shared cr-hidden-style action-link">
  #moreActionsButton {
    --cr-icon-button-icon-size: 14px;
    --cr-icon-button-margin-end: 0;
    --cr-icon-button-margin-start: 0;
    --cr-icon-button-size: 24px;
    position: absolute;
    right: 4px;
    top: 4px;
  }

  :host-context([dir='rtl']) #moreActionsButton {
    left: 4px;
    right: initial;
  }

  cr-action-menu {
    font-weight: normal;
  }

  #actionMenu iron-icon {
    --iron-icon-fill-color: var(--google-grey-700);
    padding-inline-end: 14px;
  }

  #actionMenu button {
    --iron-icon-height: 16px;
    --iron-icon-width: 16px;
    color: var(--google-grey-800);
    padding-inline-start: 14px;
  }

  cr-dialog::part(dialog) {
    width: 448px;
  }

  #removeWarningHeader {
    line-height: 20px;
    padding: 4px 20px 20px 20px;
  }

  #userName {
    overflow-wrap: break-word;
  }

  .key-text {
    font-weight: 500;
  }

  #removeActionDialogBody {
    align-items: center;
    border: 1px solid var(--google-grey-100);
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
  }

  #profileCardContainer {
    align-items: center;
    background-color: var(--profile-card-hover-color);
    border-radius: 12px 0 0 12px;
    display: flex;
    flex-direction: column;
    height: var(--profile-item-height);
    justify-content: center;
    position: relative;
    width: var(--profile-item-width);
  }

  #avatarContainer {
    height: var(--profile-card-avatar-icon-size);
    position: relative;
  }

  #profileName {
    top: 0;
  }

  #gaiaName {
    bottom: 0;
  }

  .statistics {
    border-collapse: collapse;
    flex-grow: 1;
    margin: 20px;
  }

  .statistics td {
    padding: 0;
  }

  .category {
    align-self: center;
    color: var(--cr-primary-text-color);
    line-height: 24px;
    text-align: start;
  }

  .count {
    align-self: center;
    color: var(--google-grey-500);
    text-align: end;
  }

  #removeConfirmationButton {
    --active-shadow-action-rgb: var(--google-red-500-rgb);
    --bg-action: var(--google-red-600);
    --focus-shadow-color: rgba(var(--google-red-600-rgb), .4);
    --hover-bg-action: rgba(var(--google-red-600-rgb), .9);
    --hover-shadow-action-rgb: var(--google-red-500-rgb);
    --hover-border-color: var(--google-red-100);
    --hover-shadow-action-rgb: var(--google-red-500-rgb);
  }


  @media (prefers-color-scheme: dark) {
    #actionMenu button {
      color: var(--google-grey-300);
    }

    #actionMenu iron-icon {
      --iron-icon-fill-color: var(--google-grey-500);
    }

    .warning-message {
      color: var(--google-grey-500);
    }

    #removeActionDialogBody {
      border-color: var(--google-grey-700);
    }

    #removeConfirmationButton {
      --bg-action: var(--google-red-300);
      --focus-shadow-color: rgba(var(--google-red-300-rgb), .5);
      --hover-bg-action: var(--bg-action)
          linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
    }
  }
</style>

<cr-icon-button iron-icon="cr:more-vert" id="moreActionsButton"
    on-click="onMoreActionsButtonClicked_" title="$i18n{profileMenuName}"
    aria-label="$i18n{profileMenuName}">
</cr-icon-button>

<cr-action-menu id="actionMenu" role-description="$i18n{menu}">
  <button class="dropdown-item" on-click="onCustomizeButtonClicked_">
    <iron-icon icon="profiles:create" aria-hidden="true"></iron-icon>
    $i18n{profileMenuCustomizeText}
  </button>
  <button class="dropdown-item" on-click="onRemoveButtonClicked_">
    <iron-icon icon="cr:delete" aria-hidden="true"></iron-icon>
    $i18n{profileMenuRemoveText}
  </button>
</cr-action-menu>

<cr-dialog id="removeConfirmationDialog" ignore-enter-key>
  <div slot="title">
    [[removeWarningTitle_]]
  </div>
  <if expr="lacros">
    <div id="removeWarningHeader" slot="header" class="warning-message"
        inner-h-t-m-l="[[removeWarningText_]]">
    </div>
  </if>
  <if expr="not lacros">
    <div id="removeWarningHeader" slot="header" class="warning-message">
      [[removeWarningText_]]
      <span id="userName" hidden$="[[!profileState.isSyncing]]"
          class="key-text">
        [[profileState.userName]]
      </span>
    </div>
  </if>
  <div slot="body">
    <div id="removeActionDialogBody">
      <div id="profileCardContainer">
        <div id="avatarContainer">
          <img class="profile-avatar" alt="" src="[[profileState.avatarIcon]]">
        </div>
        <div id="profileName" class="profile-card-info prominent-text">
          [[profileState.localProfileName]]
        </div>
        <div id="gaiaName" class="profile-card-info secondary-text">
          [[profileState.gaiaName]]
        </div>
      </div>
      <table class="statistics">
        <template is="dom-repeat" items="[[profileStatistics_]]">
          <tr>
            <td class="category">[[getProfileStatisticText_(item)]]</td>
            <td class="count">
              [[getProfileStatisticCount_(item, statistics_)]]
            </td>
          </tr>
        </template>
      </table>
    </div>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="onRemoveCancelClicked_">
      $i18n{cancel}
    </cr-button>
    <cr-button id="removeConfirmationButton" class="action-button"
        on-click="onRemoveConfirmationClicked_">
      $i18n{profileMenuRemoveText}
    </cr-button>
  </div>
</cr-dialog>

<if expr="lacros">
  <cr-dialog id="removePrimaryLacrosProfileDialog">
    <div slot="title" class="key-text">
      $i18n{lacrosPrimaryProfileDeletionWarningTitle}
    </div>
    <div slot="body" class="warning-message">
      [[removePrimaryLacrosProfileWarning_]]
    </div>
    <div slot="button-container">
      <cr-button class="action-button"
          on-click="onRemovePrimaryLacrosProfileCancelClicked_">
        $i18n{lacrosPrimaryProfileDeletionWarningConfirmation}
      </cr-button>
    </div>
  </cr-dialog>
</if>
